import {PageContainer} from '@ant-design/pro-layout';
import {useEffect, useState} from "react";
import ProTable from "@ant-design/pro-table";
import {Button, Image, Switch} from "antd";
import Find from "@/pages/Management/Delivery/Pick_up_point/Point/components/Find";
import Deletes from "@/pages/Management/components/Deletes"
import {getHeader} from "@/services/ant-design-pro/management";
import Addshow from "@/pages/Management/Delivery/Pick_up_point/Point/components/Addshow";

export default () => {
  const [tabKey, setTabKey] = useState('1')
  const [findModel,setFindModel] = useState(false)
  const [ DeletesIsShowEdit, setDeletesIsShowEdit ] = useState(false);
  const [ isShowAdd, setisShowAdd ] = useState(false);
  const [ titleList, setTitleList ] = useState([]);
  useEffect(()=>{
      //请求头部api
    getHeader().then((res)=>{
      setTitleList(res.map((item)=>{
        console.log(item.name);
      }));
    })
  },[])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'index',
      align: "center",
      width: 60,
    },
    {
      title: '提货点图片',
      dataIndex: 'pic',
      search: false,
      align: "center",
      width: 200,
      tip: '标题过长会自动收缩',
      render: (_,record) => {
        return (
          <Image
            width={50}
            src={record.align}
          />
        );
      }
    },
    {
      title: '提货点名称',
      dataIndex: 'name',
      search: false,
      align: "center",
      width: 200,
    },
    {
      title: '提货点电话',
      dataIndex: 'phone',
      align: "center",
      width: 200,
    },
    {
      title: '地址',
      width: 200,
      dataIndex: 'url',
      align: "center",
      search: false,
    },
    {
      title: '营业时间',
      width: 200,
      dataIndex: 'time_true',
      align: "center",
      search: false,
    },
    {
      title: '是否显示',
      align: "center",
      dataIndex: 'labels',
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '操作',
      align: "center",
      valueType: 'option',
      render: () => [
        <a onClick={()=>{setisShowAdd(true)}}>修改</a>,
        <a onClick={()=>{setDeletesIsShowEdit(true)}}>删除</a>,
      ],
    },
  ];
  const tabList = [
    {
      tab: titleList,
      key: '1',
      content:
        <div>
            <div style={ {background: 'white', padding: '15px'}}>
              <Button type="primary" onClick={()=>{setisShowAdd(true)}}>添加提货点</Button>
            </div>
          <ProTable
            columns={columns}
            editable={ {
              type: 'multiple',
            }}
            rowKey="id"
            search={ {
              labelWidth: 'auto',
            }}
            pagination={ {
              pageSize: 5,
            }}
            dateFormatter="string"
          />
        </div>
    },
    {
      tab: '隐藏中的提货点(0)',
      key: '2',
      content:
        <div>
            <div style={ {background: 'white', padding: '15px'}}>
              <Button type="primary" onClick={()=>{setisShowAdd(true)}}>添加提货点</Button>
            </div>

          <ProTable
            columns={columns}
            editable={ {
              type: 'multiple',
            }}
            rowKey="id"
            search={ {
              labelWidth: 'auto',
            }}
            pagination={ {
              pageSize: 5,
            }}
            dateFormatter="string"
          />
        </div>
    },
    {
      tab: '回收站的提货点(0)',
      key: '3',
      content:
        <div>
          <div style={ {background: 'white', padding: '15px'}}>
            <Button type="primary" onClick={()=>{setisShowAdd(true)}}>添加提货点</Button>
          </div>

          <ProTable
            columns={columns}
            editable={ {
              type: 'multiple',
            }}
            rowKey="id"
            search={ {
              labelWidth: 'auto',
            }}
            pagination={ {
              pageSize: 5,
            }}
            dateFormatter="string"
          />
        </div>
    },
  ]
  return <div >
    <div
      style={ {
        background: '#F5F7FA',
      }}
    >
      <PageContainer
        fixedHeader
        header={ {
          breadcrumb: {},
        }}
        onTabChange={(key) => {
              setTabKey(key)
        } }
        tabList={tabList}
      >
        {
          tabList.map(item => {
            if (item.key === tabKey) {
              return item.content
            }
          })
        }
      </PageContainer>
      <Find  findModel={findModel} setFindModel={setFindModel} />
      <Addshow isedit={isShowAdd} issetEdit={setisShowAdd}  />
      <Deletes isshow={DeletesIsShowEdit} setisshow={setDeletesIsShowEdit}/>
    </div>
  </div>
}
